<template>
    <div class="p-4">
        <v-card class="flex-auto flex flex-col overflow-auto p-2">
            <v-banner single-line>
                <div class="flex items-center shrink-0">
                    <el-radio-group v-model="searchForm.status" size="small">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button :label="1">未抛转</el-radio-button>
                        <el-radio-button :label="2">已抛转</el-radio-button>
                    </el-radio-group>

                    <div class="ms-auto me-2">
                        <el-button @click="onGenerateAll" size="small" type="primary">生成信息</el-button>
                        <el-button @click="onPostAllRedmine" size="small" type="success">抛砖Redmine</el-button>
                    </div>
                </div>
            </v-banner>
            <el-table :cell-style="{ padding: '6px' }" :header-cell-style="{ padding: '6px' }" style="width: 100%"
                height="calc(100vh - 200px)" :data="tableData">
                <el-table-column prop="orgName" label="来源系统" width="160px" align="center" show-overflow-tooltip />
                <el-table-column prop="workHours" label="工时(Hours)" width="120" align="center"></el-table-column>
                <el-table-column prop="title" label="标题" show-overflow-tooltip />
                <el-table-column label="操作" width="220" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="onEdit(scope.row)" size="small" type="primary">编辑</el-button>
                        <el-button @click="onDelete(scope.row)" size="small" type="danger">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
            <el-pagination :current-page.sync="searchPageQuery.page" :page-sizes="[20, 60, 100]"
                :page-size.sync="searchPageQuery.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="searchTotal">
            </el-pagination>
            <el-dialog append-to-body :visible.sync="visible" title="编辑" width="50%">
                <el-form :model="form">
                    <el-form-item label="工时" prop="workHours">
                        <el-input v-model="form.workHours" />
                    </el-form-item>
                    <el-form-item label="标题" prop="title">
                        <el-input type="textarea" :rows="4" v-model="form.title" />
                    </el-form-item>
                    <el-form-item>
                        <div>
                            <el-button @click="onEditSubmit">确定</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </v-card>
    </div>


</template>


<script>
import { getRedmineAllPageList, updateRedmine, deleteRedmine, postAllRedmine } from '@/api/taskRedmine'
import { generateCalendarAllList } from '@/api/taskRedmineCalendar'
import { defineComponent, reactive, ref, toRef, watch } from '@vue/composition-api';
import $util from '@/utils/util'
import Decimal from "decimal.js";
export default defineComponent({


    setup() {
        const tableData = ref([])

        const searchForm = reactive({
            status: 1,
            orgId: null
        })
        const searchPageQuery = reactive({
            page: 1,
            pageSize: 20,
        })
        const searchTotal = ref(0)

        watch(toRef(searchForm, 'status'), val => {
            fetchData()
        })

        function fetchData() {
            getRedmineAllPageList({
                ...searchForm,
                ...searchPageQuery
            }).then(res => {
                const data = res.data
                tableData.value = data.list.map(item => ({
                    ...item,
                    workHours: (item.workHours / (1000 * 60 * 60)).toFixed(2)
                    // assignNicknameListStr: item.assignNicknameList.join(',')
                }))
                searchTotal.value = data.total
            })

        }
        fetchData()

        watch(searchPageQuery, () => {
            fetchData()
        }, { deep: true })

        const visible = ref(false)
        const form = reactive({
            id: null,
            title: '',
            workHours: ''
        })

        function onEdit(row) {
            form.id = row.id
            form.title = row.title
            form.workHours = row.workHours
            visible.value = true
        }

        function onEditSubmit() {
            const workHours = new Decimal(form.workHours)
            updateRedmine({
                ...form,
                workHours: workHours.mul(new Decimal(60 * 60 * 1000)).toNumber()
            })
                .then(res => {
                    fetchData()
                }).finally(() => {
                    visible.value = false
                })
        }

        function onDelete(row) {
            deleteRedmine({
                id: row.id
            }).then(res => {
                fetchData()
            })
        }

        function onGenerateAll() {
            this.$confirm('此操作将生成抛砖记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        generateCalendarAllList()
                            .then(res => {
                                console.log(res)
                                $util.handleMsg(res, () => {
                                    fetchData()
                                })
                            }).finally(() => {
                                done();
                                instance.confirmButtonLoading = false;
                            })
                    } else {
                        done();
                    }
                }
            })

        }

        function onPostAllRedmine() {
            this.$confirm('此操作将抛砖所有待抛砖记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        postAllRedmine({})
                            .then(res => {
                                console.log(res)
                                $util.handleMsg(res, () => {
                                    fetchData()
                                })
                            }).finally(() => {
                                done();
                                instance.confirmButtonLoading = false;
                            })
                    } else {
                        done();
                    }
                }
            })


        }

        return {
            tableData,
            searchForm,
            searchPageQuery,
            searchTotal,

            visible,
            onEdit,
            onEditSubmit,
            onDelete,
            form,

            onGenerateAll,
            onPostAllRedmine
        }
    }
})





</script>